<template>
  <div class="info">
    <div class="left">
      <el-form ref="formRefs" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.role">
            <el-option label="超级管理员" :value="0" />
            <el-option label="管理员" :value="1" />
            <el-option label="普通用户" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-col :span="11">
            <el-date-picker v-model="form.createAt" disabled type="date" style="width: 100%" />
          </el-col>
        </el-form-item>
        <el-form-item label="修改时间">
          <el-col :span="11">
            <el-date-picker v-model="form.updateAt" disabled type="date" style="width: 100%" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">修改信息</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        name="files"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="form.image" :src="base + form.image" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
    </div>
  </div>
</template>

<script setup lang="ts">
import { localCache } from '@/utils/cache';
import { base, uploadUrl } from '@/service/config';
import { ElMessage, } from 'element-plus';
import type { FormRules } from 'element-plus'
import { editUserApi, getUserApi } from '@/service/api'
import { onMounted, reactive, ref } from 'vue'
import { sleep } from '@/utils';
const user = localCache.getCache('user')


// do not use same name with ref
const form = ref<User>(user);
const formRefs = ref();

const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, message: '用户名长度不能小于3个字符', trigger: 'blur' },
    ],
})
const handleAvatarSuccess = async (res) => {

    if (res.error) return ElMessage.error('封面上传失败');
    ElMessage.success('封面上传成功');
    await sleep(1000)
    form.value.image = res.data.url;
};

const onSubmit = () => {
  formRefs.value?.validate(async (vali) => {
    if (vali) {
      const param = {
        ...form.value,
        id: user._id,
        updateAt: Date.now()
      };
      const res: Res = await editUserApi(param);
      if (res.code !== 201) return ElMessage.error(res.msg);
      ElMessage.success(res.msg);
      getUserFn();
      location.reload();
    } else {
      console.log('验证未通过');
    }
  });
};

const getUserFn = async () => {
  const res: Res = await getUserApi({ _id: user._id });
  if (res.code !== 200) return ElMessage.error(res.msg);
  form.value = res.data[0];
  localCache.setCache('user', res.data[0]);
};

onMounted(() => {
  getUserFn();
});
</script>

<style scoped lang="less">
.info {
  background-color: white;
  height: calc(100% - 30px);
  border-radius: 5px;
  padding: 15px;
  display: flex;

  .left,
  .right {
    flex: 1;
  }

  .right {
    text-align: center;
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
